<template>
<div :class="[$style.container]">
  <div :class="[$style.breadcrumb]">
    <div v-if="!none">
      <el-checkbox :indeterminate="!all && !none" v-model="all"></el-checkbox>
      <span class="ml-2">已选中 {{checkedNum}} 项</span>
    </div>
    <div v-else>
      文档列表
    </div>
  </div>
  <div :class="[$style.actions]">
    <span v-if="none">
      <el-link :underline="false" type="primary" @click="onUp" v-if="current"><i class="el-icon-d-arrow-left"></i><span>返回上一级</span></el-link>
    </span>
    <span v-else>
      <!-- <el-link :underline="false" type="primary"><i class="el-icon-download"></i><span>下载</span></el-link> -->
    </span>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Emit, Inject, Ref, Watch } from 'vue-property-decorator'
import { PageData } from '@/config/page'
import { getDocByLink } from '@/api/doc-share'

@Component
export default class DocNav extends Vue {
  @Prop() data!: PageData<any>

  @Prop() docId!: any

  @Prop() row!: any

  @Inject() openUp!: (row: any) => void

  current: any = null

  get all () {
    return this.data.rows.length > 0 && !this.data.rows.some(v => !v.checked)
  }

  set all (value: boolean) {
    this.data.rows.forEach(v => {
      v.checked = value
    })
  }

  get none () {
    return this.data.rows.length < 1 || !this.data.rows.some(v => v.checked)
  }

  get checkedNum () {
    return this.checkedRows.length
  }

  get checkedRows () {
    return this.data.rows.filter(v => v.checked)
  }

  onUp () {
    this.openUp(this.current)
  }

  @Watch('docId', { immediate: true }) docIdChange () {
    if (!this.docId || !this.row) {
      this.current = null
    } else {
      getDocByLink(this.row?.id, this.docId).then(data => {
        this.current = data
      })
    }
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100%;
  display: flex;
  align-items: center;
}

.breadcrumb {
  flex: 1 1 auto;
}

.actions {
  flex: 0 0 auto;
}
</style>
